<!-- templates/index.html -->
{% load static %}
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Django + Vuetify 3 (CDN)</title>

  <link rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400,500,700" />

  <!-- Material Design Icons -->
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/materialdesignicons.min.css' %}" />

  <!-- Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="{% static 'js/vue.global.js' %}"></script>

  <!-- Vuetify 3 -->
  <!-- <link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.css" rel="stylesheet"> -->
  <link rel="stylesheet" href="{% static 'css/vuetify.min.css' %}" />
  <!-- <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.js"></script> -->
  <script src="{% static 'js/vuetify.min.js' %}"></script>

  <style>
    /* 抽屉菜单项悬停效果 */
    .v-list-item {
      transition: background-color 0.2s ease;
    }

    .v-list-item:hover {
      background-color: #e3f2fd !important;

    }

    /* 可选：更明显的效果 */
    .v-list-item.active:hover {
      background-color: rgba(25, 118, 210, 0.2) !important;
    }

    .v-card-actions .v-btn {
      margin-top: 4px;
    }

    /* 子菜单项更小的字体 */
    .v-list-item.pl-8 .v-list-item-title {
      font-size: 0.95rem;
    }

    /* 悬停背景色 */
    .v-list-item:hover {
      background-color: rgba(67, 160, 71, 0.1) !important;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- Vuetify 组件将在这里渲染 -->
    <v-app>

      <v-app-bar color="primary" dark>
        <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
        <v-app-bar-title>My Django App</v-app-bar-title>

        <!-- <div class="ml-4 d-flex align-center" style="color: white; font-size: 14px; padding-right: 1%;">
          <a href="#" style="color: rgba(255,255,255,0.9); text-decoration: none;">欢迎, Admin</a>
          <span style="color: rgba(255,255,255,0.6); margin: 0 8px;"> | </span>
          <a href="#" style="color: rgba(255,255,255,0.9); text-decoration: none;" @click="toggleTheme">更换主题</a>
          <span style="color: rgba(255,255,255,0.6); margin: 0 8px;"> | </span>
          <a href="#" style="color: rgba(255,255,255,0.9); text-decoration: none;">退出</a>
        </div> -->
        <!-- 欢迎信息 -->
        <span class="mr-2">欢迎，{{ currentUser }}  </span>

        <!-- 主题切换 -->
        <v-btn icon variant="text" @click="toggleTheme" title="更换主题">
          | 
          <v-icon>mdi-theme-light-dark</v-icon>
        </v-btn>

        <!-- 退出 -->
        <v-btn icon variant="text" href="/logout/" title="退出登录">
          | 
            <v-icon>mdi-logout</v-icon>
        </v-btn>
      </v-btn>

      </v-app-bar>

      <!-- <v-navigation-drawer v-model="drawer" temporary>
        <v-list nav dense>
          <v-list-item v-for="(item, index) in menuItems" :key="index" :href="item.href" :title="item.title"
            style="color: inherit; text-decoration: none;">
            <templates v-slot:prepend>
              <v-icon :icon="item.icon" class="mr-2"></v-icon>
            </templates>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-navigation-drawer> -->

      <v-navigation-drawer v-model="drawer" temporary>
        <v-list nav>
    
          <!-- 业务处理1 折叠菜单 -->
          <v-list-group value="business1">
            <template v-slot:activator="{ props }">
              <v-list-item
                v-bind="props"
                title="业务处理1"
                prepend-icon="mdi-cog"
              ></v-list-item>
            </template>
    
            <!-- 子菜单项 -->
            <v-list-item
              title="准备工作"
              href="/app1/prepare/"
              link
              class="pl-8"
            >
              <template v-slot:prepend>
                <v-icon class="mr-2">mdi-file-document-outline</v-icon>
              </template>
            </v-list-item>
    
            <v-list-item
              title="业务处理"
              href="/app1/process/"
              link
              class="pl-8"
            >
              <template v-slot:prepend>
                <v-icon class="mr-2">mdi-refresh</v-icon>
              </template>
            </v-list-item>
          </v-list-group>
    
          <!-- 业务处理2 折叠菜单 -->
          <v-list-group value="business2">
            <template v-slot:activator="{ props }">
              <v-list-item
                v-bind="props"
                title="业务处理2"
                prepend-icon="mdi-chart-bar"
              ></v-list-item>
            </template>
    
            <!-- 子菜单项 -->
            <!-- <v-list-item
              title="准备工作"
              href="/app2/prepare/"
              link
              class="pl-8"
            >
              <template v-slot:prepend>
                <v-icon class="mr-2">mdi-file-document-outline</v-icon>
              </template>
            </v-list-item> -->
    
            <v-list-item
              title="业务处理"
              href="/app2/process/"
              link
              class="pl-8"
            >
              <template v-slot:prepend>
                <v-icon class="mr-2">mdi-refresh</v-icon>
              </template>
            </v-list-item>
          </v-list-group>
    
        </v-list>
      </v-navigation-drawer>

      <!-- <v-main>
        <v-container class="pa-12">
          <v-card class="mx-auto" max-width="600" title="欢迎使用 Vuetify 3" subtitle="无需构建，直接在 Django 中使用">
            <v-card-text>
              这是一个通过 CDN 加载的 Vuetify 3 页面，支持主题切换和响应式布局。
            </v-card-text>
            <v-card-actions>
              <v-btn color="primary" variant="flat">点击我</v-btn>
              <v-btn color="secondary" variant="outlined">次级按钮</v-btn>
            </v-card-actions>
          </v-card>
        </v-container>
      </v-main> -->
      <v-main>
        <v-container class="pa-4" style="max-width: 800px; margin: 0 auto;">
          {% csrf_token %}
          <v-card class="mb-6" title="业务处理1 - 文件上传" variant="outlined">
            <v-card-text>
              <v-file-input label="选择文件" placeholder="请选择要上传的文件" variant="outlined" prepend-icon="mdi-paperclip"
                show-size counter accept=".csv,.xlsx" :messages="`支持格式：CSV、Excel 表格`" ref="fileInput1"></v-file-input>
            </v-card-text>
            <v-card-actions>
              <v-btn color="primary" variant="flat" block @click="submitFile(1)">提交文件</v-btn>
            </v-card-actions>
            <v-card-actions>
              <v-btn color="secondary" variant="outlined" block @click="clearFile(1)">清空文件</v-btn>
            </v-card-actions>
          </v-card>

          <!-- 业务处理2 -->
          <v-card class="mb-6" title="业务处理2 - 文件上传" variant="outlined">
            <v-card-text>
              <v-file-input label="选择文件" placeholder="请选择要上传的文件" variant="outlined" prepend-icon="mdi-paperclip"
                show-size counter accept=".csv,.xlsx" :messages="`支持格式：CSV、Excel 表格`" ref="fileInput2"></v-file-input>
            </v-card-text>
            <v-card-actions>
              <v-btn color="primary" variant="flat" block @click="submitFile(2)">提交文件</v-btn>
            </v-card-actions>
            <v-card-actions>
              <v-btn color="secondary" variant="outlined" block @click="clearFile(2)">清空文件</v-btn>
            </v-card-actions>
          </v-card>

        </v-container>
      </v-main>

    </v-app>
  </div>

  <script>
    const { createApp } = Vue;

    // 定义自定义主题
    const lightTheme = {
      dark: false,
      colors: {
        background: '#FFFFFF',
        surface: '#FFFFFF',
        primary: '#43A047',     /* 绿色主色 */
        secondary: '#5C6BC0',
        accent: '#8D6E63',
        error: '#EF5350',
        info: '#29B6F6',
        success: '#66BB6A',
        warning: '#FFB74D',
      }
    };

    const darkTheme = {
      dark: true,
      colors: {
        background: '#121212',
        surface: '#212121',
        primary: '#4DB6AC',
        secondary: '#7E57C2',
        accent: '#BDBDBD',
        error: '#EF9A9A',
        info: '#4FC3F7',
        success: '#81C784',
        warning: '#FFD54F',
      }
    };

    // 创建 Vuetify 实例
    const vuetify = Vuetify.createVuetify({
      theme: {
        defaultTheme: 'lightTheme',
        themes: {
          lightTheme,
          darkTheme
        }
      }
    });

    // 创建 Vue 应用
    const app = createApp({
      data: () => ({
        drawer: false,
        theme: 'lightTheme',
        menuItems: [
          { title: '业务处理1', href: '/app1/index', icon: 'mdi-cog' },
          { title: '业务处理2', href: '/app2/index', icon: 'mdi-chart-bar' },
          { title: '业务处理3', href: '/app3/index', icon: 'mdi-package-variant' },
        ]
      }),
      methods: {
        toggleTheme() {
          this.theme = this.theme === 'lightTheme' ? 'darkTheme' : 'lightTheme';
          this.$vuetify.theme.name = this.theme;
        },
        submitFile(step) {
          const input = this.$refs[`fileInput${step}`]?.$el?.querySelector('input[type="file"]');
          const file = input?.files[0];

          if (!file) {
            alert(`业务处理${step}：请先选择文件`);
            return;
          }

          const formData = new FormData();
          formData.append('file', file);

          const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value || '{{ csrf_token }}';

          fetch(`/app${step}/upload/`, {
            method: 'POST',
            body: formData,
            headers: {
              'X-CSRFToken': csrfToken
            },
            credentials: 'same-origin'
          })
            .then(response => {
              if (response.ok) {
                alert(`业务处理${step}：文件上传成功！`);
                input.value = '';  // ✅ 清空文件栏
              } else {
                return response.text().then(text => {
                  alert(`上传失败: ${text.slice(0, 200)}`);
                });
              }
            })
            .catch(error => {
              alert(`网络错误: ${error.message}`);
            });
        },
        clearFile(step) {
          const input = this.$refs[`fileInput${step}`]?.$el?.querySelector('input[type="file"]');
          if (input) {
            input.value = '';
            alert(`业务处理${step}：文件已清空`);
          }
        }
      },
    });

    // 使用 Vuetify 插件
    app.use(vuetify);

    // 挂载
    app.mount('#app');
  </script>

</body>

</html>